<script setup lang="ts">
import { inject, ref, computed, Ref } from 'vue';
import { playerKey, playListKey, musicHistory, playIndexKey, nextMusicKey, lastMusicKey, getPlayingMusicKey, playingMusicDurationKey } from '@/type'
import { useStore } from '../stores/index';
import { playtimeFormat } from '../utils/index';
import PlayList from '../components/PlayList.vue';
import playGray from '../assets/play-gray.svg'
import playWhite from '../assets/play-white.svg'
import pauseGray from '../assets/pause-gray.svg'
import pauseWhite from '../assets/pause-white.svg'
import lastGray from '../assets/last-gray.svg'
import lastWhite from '../assets/last-white.svg'
import nextGray from '../assets/next-gray.svg'
import nextWhite from '../assets/next-white.svg'
import router from '../router/index';
import musicFill from '../assets/music_fill.svg'

/**
 * audio 对象
 */
const player = inject(playerKey) as HTMLAudioElement
const store = useStore()
const BaseUrl = store.getBaseUrl()
const playList = inject(playListKey) as Ref<musicHistory[]>
const playIndex = inject(playIndexKey) as Ref<number>
const nextMusic = inject(nextMusicKey) as () => void
const lastMusic = inject(lastMusicKey) as () => void
const getPlayingMusic = inject(getPlayingMusicKey) as Function
const playingMusicDuration = inject(playingMusicDurationKey) as Ref<number>
/**
 * 是否在播放
 */
const playing = ref(false)
const playStyle = [playGray, playWhite, pauseGray, pauseWhite]
const playFontStyle = ref([playGray, playWhite])
const lastFontStyle = ref([lastGray, lastWhite])
const nextFontStyle = ref([nextGray, nextWhite])
const showBottomList = ref(false)
/**
 * 收藏模态框
 */
const Collect = store.switchShowCollectModel
const switchShowCollect = () => {
    if (getPlayingMusic()) {
        store.setCollectMusicId(getPlayingMusic().id)
        Collect()
    }
}



const switchShowBottomList = () => {
    showBottomList.value = !showBottomList.value
}
const styleIndex = ref({
    play: 0,
    last: 0,
    next: 0
});
/**
 * 进度条 HTMLDivElement
 */
const range = ref()
let progressBarX = 0;
/**
 * 播放长度 - 映射480
 */
const progressNum = ref(0);
/**
 * 已播放时长
 */
const playingCurrentTime = ref(0)
const changeBtnStyle = (val: number, type: "last" | "next" | "play") => {
    styleIndex.value[type] = val;
}
/**
 * 改变样式
 */
const changePlayStyle = () => {
    if (playing.value) {
        playFontStyle.value[0] = playStyle[2]
        playFontStyle.value[1] = playStyle[3]

    } else {
        playFontStyle.value[0] = playStyle[0]
        playFontStyle.value[1] = playStyle[1]
    }
}
const clickPlayBtn = () => {
    if (playing.value == true) {
        player.pause()
    } else {
        player.play()
    }
}
/**
 * 上一曲
 */
const clickLastBtn = () => {
    lastMusic()
}
/**
 * 下一曲
 */
const clickNextBtn = () => {
    nextMusic()
}

/**
 * 是否处于拖拽进度条状态
 */
let dragIng = ref(false);
/**
 * 拖拽事件
 * @param e 事件对象
 */
const dragProgress = (e: MouseEvent) => {
    progressNum.value = Number((e.clientX - progressBarX).toFixed())
    if (progressNum.value > 480) {
        progressNum.value = 480
    } else if (progressNum.value < 0) {
        progressNum.value = 0
    }
}
/**
 * 移除拖拽对象
 * 重置dragIng状态
 * 更新播放时间
 */
const removeDragProgress = () => {
    window.document.removeEventListener('mousemove', dragProgress)
    player.currentTime = Number(((progressNum.value / 480) * player.duration).toFixed())
    dragIng.value = false
    window.removeEventListener('mouseup', removeDragProgress)
}
/**
 * 改变进度条
 * 当按下鼠标左键不松开时触发拖拽事件
 * @param e 点击事件
 */
const changePlayProgress = (e: MouseEvent) => {
    dragIng.value = true
    if (progressBarX == 0) {
        progressBarX = range.value.getBoundingClientRect().left
    }
    window.document.addEventListener('mousemove', dragProgress)
    progressNum.value = Number((e.clientX - progressBarX).toFixed())
    if (progressNum.value > 480) {
        progressNum.value = 480
    } else if (progressNum.value < 0) {
        progressNum.value = 0
    }
    window.document.addEventListener('mouseup', removeDragProgress)
}
/**
 * 播放 清空进度条
 */
player.addEventListener('play', () => {
    playing.value = true
    progressNum.value = Number(((player.currentTime / player.duration) * 480).toFixed())
    changePlayStyle()
})
/**
 * 暂停
 */
player.addEventListener('pause', () => {
    playing.value = false
    changePlayStyle()
})
/**
 * 播放时更新进度条
 */
player.addEventListener('timeupdate', () => {
    playingCurrentTime.value = player.currentTime

    if (!dragIng.value) {
        progressNum.value = Number(((player.currentTime / player.duration) * 480).toFixed())
    }
})
/**
 * 优化进度条的显示
 */
const betterProgressNumOnShow = computed(() => {
    if (progressNum.value > 400) {
        return progressNum.value;
    }
    if (progressNum.value < 2) {
        return 0;
    }
    return progressNum.value + 2;
})
const toMusicPage = () => {
    const music = getPlayingMusic()
    if (music) {
        router.push({
            name: 'singleMusic',
            params: { musicId: music.id }
        })
    }
}
</script>
<template>
    <div class="player">
        <div class="control">
            <div class="btn">
                <div>
                    <img @click="clickLastBtn" @mouseover="changeBtnStyle(1, 'last')"
                        @mouseleave="changeBtnStyle(0, 'last')" :src="lastFontStyle[styleIndex.last]" alt="" class="last">
                </div>
                <div @click="clickPlayBtn">
                    <img @mouseover="changeBtnStyle(1, 'play')" @mouseleave="changeBtnStyle(0, 'play')"
                        :class="{ play: true, playing: playing }" :src="playFontStyle[styleIndex.play]" alt="">
                </div>
                <div>
                    <img @click="clickNextBtn" @mouseover="changeBtnStyle(1, 'next')"
                        @mouseleave="changeBtnStyle(0, 'next')" :src="nextFontStyle[styleIndex.next]" alt="" class="next">
                </div>
            </div>
            <div class="musicPlayInfo">
                <div @click="toMusicPage" class="image">
                    <img :src="playIndex != -1 ? BaseUrl + '/static/image/' + playList[playIndex].image : musicFill" alt="">
                </div>
                <div class="playInfo">
                    <div class="title">
                        <span class="musicInfo">{{ playIndex !== -1 ? playList[playIndex].name : '' }}</span>
                        <span class="singer">{{ playIndex !== -1 ? playList[playIndex].singerName : '' }}</span>

                    </div>
                    <div class="range" ref="range" @mousedown="changePlayProgress">
                        <div class="radio" :style="{ left: progressNum + 'px' }">

                        </div>
                        <div class="bg" :style="{ width: ((betterProgressNumOnShow / 4.8)) + '%' }">

                        </div>
                    </div>
                </div>
                <!-- 播放时间 -->
                <div class="time">
                    <span :class="{ timeShow: playingMusicDuration != 0, timeHide: playingMusicDuration == 0 }">
                        {{ playtimeFormat(playingCurrentTime) }} / {{ playtimeFormat(playingMusicDuration) }}
                    </span>
                </div>
                <div class="func">
                    <img @click="switchShowCollect" class="collect" src="../assets/collect-fff.svg">
                    <img @click="switchShowBottomList" src="../assets/playList-fff.svg" class="list" id="openPlayList">
                    <PlayList :is-open="showBottomList" :close="switchShowBottomList" />
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped lang="css">
.func {
    display: flex;
    align-items: center;
    margin-left: 10px;

}

.func .list {
    margin-left: 5px;
    width: 23px;
    height: 23px;
    cursor: pointer;
}

.func .collect {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.timeShow {
    visibility: visible;
}

.timeHide {
    visibility: hidden;
}

.time {
    display: flex;
    align-items: end;
    flex-direction: row;
    font-size: 12px;
    color: #797979;
    margin-left: 8px;
    width: 82px;
}

.singer {
    font-size: 12px;
    color: #999;
    margin-left: 15px;
}

.bg {
    position: absolute;
    height: 100%;
    border-radius: 5px;
    background-color: var(--red-style);
}

.radio {
    border-radius: 100%;
    position: absolute;
    height: 16px;
    width: 16px;
    top: -4px;
    z-index: 999;
    background-color: white;

}

.musicInfo {
    font-size: 12px;
    color: white;
}

.title {
    line-height: 15px;
    margin-left: 5px;
}

.playInfo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 5px;
}

.range {
    width: 495px;
    height: 9px;
    position: relative;
    background-color: rgba(30, 30, 30, 0.95);
    border-radius: 5px;
    margin-bottom: 3px;
}

.btn {
    display: flex;
    align-items: center;
    margin-top: 5px;
    height: 45px;
}

.musicPlayInfo {
    display: flex;
    margin-left: 25px;
}

.musicPlayInfo .image {
    border: 1px solid black;
    border-radius: 5%;
    display: flex;

    height: calc(var(--music-image-tiny));
    width: calc(var(--music-image-tiny));
}

.musicPlayInfo .image img {
    height: var(--music-image-tiny);
    width: var(--music-image-tiny);
}

.play .last .next {
    cursor: pointer;
}

.next,
.last {
    width: 35px;
    height: 35px;
    display: flex;
}

.playing {
    width: 39px !important;
    height: 39px !important;
    padding: 0 3px;

}

.player {
    position: fixed;
    bottom: 0;
    background-color: rgba(46, 46, 46, 0.95);
    height: 50px;
    width: 100%;
}

.control img:hover {
    src: '../assets/play-white.svg';
}

.control {
    width: 948px;
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}

.play {
    width: 45px;
    height: 45px;
    fill: white;
}
</style>